<script lang="ts" setup>
import { getBrand, withChildren, porductList } from '../../api/index';
// 引入vue
import { onMounted, reactive } from 'vue';

import { Edit } from '@element-plus/icons-vue'

import router from '../../router/index'

// 获取品牌列表
const pageData: any = reactive({
    list: [],
    statucList: [{
        id: 0,
        name: '下架'
    }, {
        id: 1,
        name: '上架'
    }],
    verifyList: [{
        id: 0,
        name: '未审核'
    }, {
        id: 1,
        name: '审核通过'
    }],
    categoryList: [],
    productList: [],
    requestData: {
        brandId: null,
        publishStatus: null,
        verifyStatus: null,
        keyword: null,
        productSn: null,
        productCategoryId: null,
        pageNum: 1,
        pageSize: 10
    },
    total: 0
})
const getBrandList = () => {
    getBrand({
        pageNum: 1,
        pageSize: 12
    }).then((res: any) => {
        pageData.list = res.data.data.list;
    })
}

const getWithChildren = () => {
    withChildren().then((res: any) => {
        pageData.categoryList = res.data.data;
    })
}

const getList = () => {
    porductList(pageData.requestData).then((res: any) => {
        res.data.data.list.forEach((item: any) => {
            item.publishStatus = Boolean(item.publishStatus)
            item.newStatus = Boolean(item.newStatus)
            item.recommandStatus = Boolean(item.recommandStatus)
        })
        pageData.productList = res.data.data.list;
        pageData.total = res.data.data.total;
    })
}

onMounted(() => {
    getBrandList();
    getWithChildren();
    getList();
})

const sizeChange = (e) => {
    pageData.requestData.pageSize = e;
    getList();
}

const currentChange = (e) => {
    pageData.requestData.pageNum = e;
    getList();
}

// 跳转方法
const navTo = (url) => {
    router.push({
        path:url
    })
}
</script>

<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
            <div>
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
                <el-button style="float:right" type="primary" size="small">
                    查询搜索
                </el-button>
                <el-button style="float:right;margin-right: 15px" size="small">
                    重置
                </el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" label-width="140px">
                    <el-row justify="start">
                        <el-col :span="7">
                            <el-form-item label="输入搜索：">
                                <el-input class="input-width" v-model="pageData.requestData.keyword" placeholder="商品名称"
                                    clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="商品货号：">
                                <el-input class="input-width" v-model="pageData.requestData.productSn" placeholder="商品货号"
                                    clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="商品分类：">
                                <el-cascader v-model="pageData.requestData.productCategoryId"
                                    :options="pageData.categoryList" :props="{
                                        value: 'id',
                                        label: 'name'
                                    }" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row justify="start">
                        <el-col :span="7">
                            <el-form-item label="商品品牌：">
                                <el-select v-model="pageData.requestData.brandId" class="m-2" placeholder="请选择">
                                    <el-option v-for="item in pageData.list" :key="item.id" :label="item.name"
                                        :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="上架状态：">
                                <el-select v-model="pageData.requestData.publishStatus" class="m-2" placeholder="请选择">
                                    <el-option v-for="item in pageData.statucList" :key="item.id" :label="item.name"
                                        :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="审核状态：">
                                <el-select v-model="pageData.requestData.verifyStatus" class="m-2" placeholder="请选择">
                                    <el-option v-for="item in pageData.verifyList" :key="item.id" :label="item.name"
                                        :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-card>
        <el-card class="operate-container" shadow="never">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
            <el-button class="btn-add" size="small">
                添加
            </el-button>
        </el-card>
        <el-card class="operate-container" shadow="never">
            <el-table :data="pageData.productList" style="width: 100%" border>
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="编号" prop="id" width="80" align="center" />
                <el-table-column label="商品图片" width="120" align="center">
                    <template #default="scope">
                        <img :src="scope.row.pic" alt="">
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" width="180" align="center">
                    <template #default="scope">
                        <el-row justify="center">
                            {{ scope.row.name }}
                        </el-row>
                        <el-row justify="center">
                            品牌: {{ scope.row.brandName }}
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="价格/货号" width="130" align="center">
                    <template #default="scope">
                        <el-row justify="center">
                            价格: ￥{{ scope.row.price }}
                        </el-row>
                        <el-row justify="center">
                            货号: {{ scope.row.productSn }}
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="标签" width="120" align="center">
                    <template #default="scope">
                        <el-row justify="center">
                            上架：
                            <el-switch v-model="scope.row.publishStatus" />
                        </el-row>
                        <el-row justify="center">
                            新品：
                            <el-switch v-model="scope.row.newStatus" />
                        </el-row>
                        <el-row justify="center">
                            推荐：
                            <el-switch v-model="scope.row.recommandStatus" />
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="排序" prop="sort" width="80" align="center" />
                <el-table-column label="标签" width="80" align="center">
                    <template #default="scope">
                        <el-row justify="center">
                            <el-button type="primary" :icon="Edit" circle />
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="销量" prop="sale" width="80" align="center" />
                <el-table-column label="审核状态" width="150" align="center">
                    <template #default="scope">
                        <el-row justify="center">
                            {{ scope.row.verifyStatus == 0 ? '未审核' : '审核通过' }}
                        </el-row>
                        <el-row justify="center">
                            <el-button type="text">
                                审核详情
                            </el-button>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                        <el-row justify="center">
                            <el-button size="small">
                                查看
                            </el-button>
                            <el-button size="small" @click="navTo('/pms/updateProduct/' + scope.row.id)">
                                编辑
                            </el-button>
                        </el-row>
                        <el-row justify="center" style="margin-top: 15px;">
                            <el-button size="small">
                                日志
                            </el-button>
                            <el-button type="danger" size="small">
                                删除
                            </el-button>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-row justify="end">
            <el-pagination background v-model:current-page="pageData.requestData.pageNum" v-modle:page-size="pageData.requestData.pageSize"
                :page-sizes="[5, 10, 15]" :total="pageData.total" layout="total, sizes, prev, pager, next, jumper"
                @size-change="sizeChange"
                @current-change="currentChange"
                >

            </el-pagination>
        </el-row>
    </div>
</template>

<style lang="scss">
.filter-container,
.operate-container {
    margin-bottom: 15px;
    position: relative;

    .btn-add {
        position: absolute;
        right: 15px;
    }
}

img {
    width: 50px;
    // height: 100px;
}
</style>